<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>作品详情</text>
			<image src="/static/svg/moer11.svg" @tap="toShowMenu"  class="header-right-img" slot="right"></image>
		</pageHeader>
		<view style="background-color: #FFFFFF;margin-top: 16rpx;">
			<view class="author_message">
				<image src="/static/img/20200210110217.jpg" mode="" @tap="toPersonalDeail" :data-userid="message.userId"></image>
				<view class="author_message_word">
					<view><text>{{message.userName}}</text><text>{{message.styleContent?message.styleContent:message.designStyle}}</text></view>
					<view><text>{{message.apartmentContent?message.apartmentContent:message.designApartment}}</text><text style="margin-left:1em;">{{message.areaNumber}}平方米</text><text style="margin-left:1em;">{{message.placeContent?message.placeContent:message.designPlace}}</text></view>
				</view>
			</view>
			<text class="title">{{message.designTitle}}</text>
			<view class="time">
				<text>{{message.addTime}}</text>
			</view>
		</view>
		<editor id="editor" :read-only='true' class="ql-container designExample"   @ready="onEditorReady" ></editor>
		<view style="height: 16rpx;background-color: #F5F5F5;"></view>
		<conciseComment :list='messageList' @praise='commentPraise' @dele='getThreeComment' @toMore='toAllComment'/>
		<view style="height:86rpx" v-if="lookList.length<=0"></view>
		<view class="lookAndLook_title" v-if="lookList.length>0">
			<view></view>
			<text>看了又看</text>
			<view></view>
		</view>
		<view class="lookAndLook_body" v-if="lookList.length>0">
			<homeDesign  v-for='(item,index) in lookList' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
		</view>
		<productFooter :message='message' @collect='collect' @praise='praise' :isInDetail='true'/>
		<menu1 v-model="menuShow"/>
		<view class="consultation">
			<image src="/static/svg/menu6.svg" mode=""></image>
			<text>找TA咨询</text>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import homeDesign from "@/components/index/homeDesign.vue"
	import pageHeader from "@/components/header/header.vue"
	import conciseComment from "@/components/comment/conciseComment.vue"
	import productFooter from "@/components/footer/productFooter.vue"
	import menu1 from "@/components/menu/menu.vue"
	export default {
		components: {pageHeader,conciseComment,homeDesign,productFooter,menu1},
		data() {
			return {
				html:{},
				menuShow:false,
				id:"",
				context:"",
				message:{},
				designStyle:"",
				designPlace:"",
				lookList:[],
				messageList:[]
			};
		},
		onLoad(e) {
			this.id=e.id
			this.designStyle=e.designStyle
			this.designPlace=e.designPlace
		},
		onShow() {
			this.getMessage()
			this.getThreeComment()
		},
		methods: {
			async getThreeComment(e){
				if(e){
					this.message.discussNumber-=1
				}
				let data={}
				data.answerId=this.id
				data.state=1
				data.userId=localStorage.getItem("userId")
				let res=await urls.threeComment(data)
				this.messageList=res.data
			},
			async getMessage(){
				let data={}
				data.designStyle=this.designStyle
				data.designPlace=this.designPlace
				data.designId=this.id
				data.userId=localStorage.getItem("userId")
				let res=await urls.specific(data)
				this.lookList=res.data.designArticles
				this.message=res.data.specific
				this.html=JSON.parse(res.data.specific.designContent)
				try{
					this.context.setContents({
						delta:this.html
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onEditorReady(){
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.context=res.context
				    res.context.setContents({
						delta:this.html
					})
				}).exec()
			},
			toShowMenu(){
				this.menuShow=true
			},
			toOtherHomepage(e){
				let id=e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/otherHomepage/designerIndex?userId='+id
				})
			},
			homeDesignCollect(index,isAlready){
				if(!isAlready){
					this.lookList[index].collection="1"
					this.lookList[index].collectionNumber-=1
				}else{
					this.lookList[index].collection="0"
					this.lookList[index].collectionNumber+=1
				}	
			},
			homeDesignPraise(index,isAlready){
				if(!isAlready){
					this.lookList[index].zan="1"
					this.lookList[index].zanNumber-=1
				}else{
					this.lookList[index].zan="0"
					this.lookList[index].zanNumber+=1
				}	
			},
			collect(isAlready){
				if(!isAlready){
					this.message.collection="1"
					this.message.collectionNumber-=1
				}else{
					this.message.collection="0"
					this.message.collectionNumber+=1
				}	
			},
			praise(isAlready){
				if(!isAlready){
					this.message.zan="1"
					this.message.zanNumber-=1
				}else{
					this.message.zan="0"
					this.message.zanNumber+=1
				}	
			},
			commentPraise(index,isAlready){
				if(!isAlready){
					this.messageList[index].zan="1"
					this.messageList[index].zanNumber-=1
				}else{
					this.messageList[index].zan="0"
					this.messageList[index].zanNumber+=1
				}	
			},
			toAllComment(){
				localStorage.setItem("designMessage",JSON.stringify(this.message))
				uni.navigateTo({
					url: '/pages/homeDesign/allComment?id='+this.message.designId+"&state="+1
				})
				
			}
		},
	}
</script>

<style lang="scss">
page{
	background-color: #F5F5F5;
}
.header-right-img{
	height: 50rpx;
	width: 50rpx;
	margin-right: 29rpx;
}
.top_padding{
	height: 42rpx;
	background-color: #FFFFFF;
	position: fixed;
	width: 750rpx;
	top: 80rpx;
	z-index: 995;
	view{
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.author_message{
	border-bottom: 1rpx solid #EEEEEE;
	padding: 50rpx 0 28rpx 30rpx;
	display: flex;
	align-items: center;
	image{
		height: 92rpx;
		width: 92rpx;
		border-radius: 50%;
	}
	.author_message_word{
		margin-left: 20rpx;
		height: 92rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
}
.author_message_word>view:first-of-type{
	display: flex;
	align-items: center;
	position: relative;
	top: 5rpx;
}
.author_message_word>view:first-of-type>text:first-of-type{
	font-size: 32rpx;
	line-height: 32rpx;
	color: #333333;
	font-weight: bold;
	bottom: unset;
}
.author_message_word>view:first-of-type>text:last-of-type{
	display: block;
	height: 36rpx;
	padding: 0 8rpx;
	background-color: #D7BD9F;
	border-radius: 8rpx;
	color:#704F29;
	font-size: 24rpx;
	line-height: 36rpx;
	margin-left: 20rpx;
	bottom: unset;
	white-space: pre;
}
.author_message_word>view:last-of-type{
	color: #999999;
	letter-spacing: 1rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	position: relative;
	bottom: 8rpx;
}
.title{
	font-size: 32rpx;
	display: block;
	margin-top: 40rpx;
	margin-left: 30rpx;
	letter-spacing: 1rpx;
	font-weight: bold;
}
.time{
	font-size: 24rpx;
	color: #999999;
	letter-spacing: 1rpx;
	margin-top: 20rpx;
	padding-left: 10rpx;
	text{
		margin-left: 20rpx;
	}
}
#editor{
	height: unset;
	min-height:  unset;
	overflow-y: hidden;
	background-color: #FFFFFF;
}
.ql-container{
	padding-top: 30rpx;
	padding-bottom: 60rpx;
	overflow-y: hidden;
}
.lookAndLook_title{
	height: 130rpx;
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		height: 1px;
		background-color: #DDDDDD;
		width: 166rpx;
	}
	text{
		font-size: 28rpx;
		color: #666666;
		letter-spacing: 1rpx;
		margin: 0 30rpx;
	}
}
.lookAndLook_body{
	position: relative;
	top: -30rpx;
	padding-bottom: 128rpx;
}
.consultation{
	z-index: 100;
	position: fixed;
	height: 120rpx;
	width: 120rpx;
	border-radius: 50%;
	box-shadow:0px 3rpx 5rpx 2rpx rgba(96,96,96,0.5);
	right: 50rpx;
	bottom: 180rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	background-color: rgba(255,255,255,0.82);
	image{
		height: 52rpx;
		width: 52rpx;
		margin-top: 16rpx;
	}
	text{
		font-size: 30rpx;
		transform:scale(0.6);
		width: 166.67rpx;
		position: relative;
		left: 9rpx;
		color: #666666;
		font-weight: bold;
		letter-spacing: 1rpx;
		margin-top: 12rpx;
		line-height: 18rpx;
	}
}
</style>
